Reactã¹ã±ãžã¥ãŒã©ã®å調çãã«ãã¿ã¹ã¯ãšã¿ã¹ã¯è²æž¡æŠç¥ã§ãå¹ççãªUIæŽæ°ãšé«ã¬ã¹ãã³ã¹ãªã¢ããªãå®çŸããã®åŒ·åãªãã¯ããã¯ã®æŽ»çšæ³ã解説ããŸãã
Reactã¹ã±ãžã¥ãŒã©ã®å調çãã«ãã¿ã¹ã¯ïŒã¿ã¹ã¯è²æž¡æŠç¥ããã¹ã¿ãŒãã
çŸä»£ã®Webéçºã®äžçã§ã¯ãã·ãŒã ã¬ã¹ã§å¿çæ§ã®é«ããŠãŒã¶ãŒäœéšãæäŸããããšãæãéèŠã§ãããŠãŒã¶ãŒã¯ãããã¯ã°ã©ãŠã³ãã§è€éãªæäœãè¡ãããŠãããšãã§ãããã¢ããªã±ãŒã·ã§ã³ãèªèº«ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã«å³åº§ã«åå¿ããããšãæåŸ ããŸãããã®æåŸ ã¯ãJavaScriptã®ã·ã³ã°ã«ã¹ã¬ãããšããæ§è³ªã«å€§ããªè² æ ããããŸããåŸæ¥ã®ã¢ãããŒãã§ã¯ãèšç®éã®å€ãã¿ã¹ã¯ãã¡ã€ã³ã¹ã¬ããããããã¯ãããšãUIã®ããªãŒãºãåäœã®é å»¶ãé »ç¹ã«çºçããŠããŸãããããã§ãå調çãã«ãã¿ã¹ã¯ã®æŠå¿µããããŠããå ·äœçã«ã¯Reactã¹ã±ãžã¥ãŒã©ã®ãããªãã¬ãŒã ã¯ãŒã¯å ã§ã®ã¿ã¹ã¯è²æž¡ïŒtask yieldingïŒæŠç¥ãäžå¯æ¬ ãšãªããŸãã
Reactã®å éšã¹ã±ãžã¥ãŒã©ã¯ãUIãžã®æŽæ°ãã©ã®ããã«é©çšããããã管çããäžã§éèŠãªåœ¹å²ãæãããŸããé·ãéãReactã®ã¬ã³ããªã³ã°ã¯äž»ã«åæçã§ãããããã¯å°èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ã«ã¯å¹æçã§ããããããèŠæ±ã®å³ããã·ããªãªã§ã¯èŠæŠããŠããŸãããReact 18ãšãã®äžŠè¡ïŒconcurrentïŒã¬ã³ããªã³ã°æ©èœã®å°å ¥ã¯ããã©ãã€ã ã·ããããããããŸããããã®å€åã®æ žå¿ã«ããã®ã¯ãå調çãã«ãã¿ã¹ã¯ãçšããŠã¬ã³ããªã³ã°äœæ¥ãããå°ãã管çå¯èœãªãã£ã³ã¯ïŒå¡ïŒã«åå²ãããæŽç·Žãããã¹ã±ãžã¥ãŒã©ã§ãããã®èšäºã§ã¯ãReactã¹ã±ãžã¥ãŒã©ã®å調çãã«ãã¿ã¹ã¯ãæ·±ãæãäžããç¹ã«ãã®ã¿ã¹ã¯è²æž¡æŠç¥ã«çŠç¹ãåœãŠããã®ä»çµã¿ãšãéçºè ããããæŽ»çšããŠããããã©ãŒãã³ã¹ãé«ããå¿çæ§ã®è¯ãã¢ããªã±ãŒã·ã§ã³ãã°ããŒãã«èŠæš¡ã§æ§ç¯ããæ¹æ³ã«ã€ããŠè§£èª¬ããŸãã
JavaScriptã®ã·ã³ã°ã«ã¹ã¬ããæ§ãšããããã³ã°ã®åé¡ãçè§£ãã
Reactã¹ã±ãžã¥ãŒã©ã«ã€ããŠæãäžããåã«ãæ ¹æ¬çãªèª²é¡ã§ããJavaScriptã®å®è¡ã¢ãã«ãææ¡ããããšãäžå¯æ¬ ã§ããã»ãšãã©ã®ãã©ãŠã¶ç°å¢ã«ãããŠãJavaScriptã¯ã·ã³ã°ã«ã¹ã¬ããã§åäœããŸããããã¯ãäžåºŠã«äžã€ã®æäœããå®è¡ã§ããªãããšãæå³ããŸããããã«ããéçºã®äžéšã®åŽé¢ã¯ç°¡çŽ åãããŸãããUIäžå¿ã®ã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠã¯é倧ãªåé¡ãšãªããŸããè€éãªããŒã¿åŠçãéãèšç®ãåºç¯å²ãªDOMæäœãšãã£ãæéã®ãããã¿ã¹ã¯ãã¡ã€ã³ã¹ã¬ãããå æãããšãä»ã®éèŠãªæäœã®å®è¡ã劚ããããŸãããããã¯ãããæäœã«ã¯ä»¥äžã®ãããªãã®ããããŸãïŒ
- ãŠãŒã¶ãŒå ¥åïŒã¯ãªãã¯ãã¿ã€ãã³ã°ãã¹ã¯ããŒã«ïŒãžã®å¿ç
- ã¢ãã¡ãŒã·ã§ã³ã®å®è¡
- UIæŽæ°ãå«ãä»ã®JavaScriptã¿ã¹ã¯ã®å®è¡
- ãããã¯ãŒã¯ãªã¯ãšã¹ãã®åŠç
ãã®ããããã³ã°åäœã®çµæããŠãŒã¶ãŒäœéšã¯æªåããŸãããŠãŒã¶ãŒã¯ã€ã³ã¿ãŒãã§ãŒã¹ã®ããªãŒãºãå¿çã®é å»¶ãã«ã¯ã«ã¯ããã¢ãã¡ãŒã·ã§ã³ãªã©ãç®ã«ãããã©ã¹ãã¬ãŒã·ã§ã³ãæããŠã¢ããªã±ãŒã·ã§ã³ããé¢è±ããŠããŸããŸããããã¯ãã°ãã°ãããããã³ã°åé¡ããšåŒã°ããŸãã
åŸæ¥ã®åæã¬ã³ããªã³ã°ã®éç
䞊è¡ã¢ãŒã以åã®Reactæä»£ã§ã¯ãã¬ã³ããªã³ã°ã®æŽæ°ã¯éåžžãåæçã§ãããã³ã³ããŒãã³ãã®stateãpropsã倿ŽããããšãReactã¯ãã®ã³ã³ããŒãã³ããšãã®åèŠçŽ ãå³åº§ã«åã¬ã³ããªã³ã°ããŠããŸããããã®åã¬ã³ããªã³ã°åŠçã«å€§éã®äœæ¥ãå«ãŸããå Žåãã¡ã€ã³ã¹ã¬ããããããã¯ãããåè¿°ã®ããã©ãŒãã³ã¹åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãããäœçŸããªç§ããããè€éãªãªã¹ãã®ã¬ã³ããªã³ã°ããé«å¯åºŠã®ããŒã¿å¯èŠåãæ³åããŠã¿ãŠãã ããããã®éããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã¯ç¡èŠãããå¿çæ§ã®ãªãã¢ããªã±ãŒã·ã§ã³ãçãŸããŠããŸããŸãã
ãªãå調çãã«ãã¿ã¹ã¯ã解決çãªã®ã
å調çãã«ãã¿ã¹ã¯ãšã¯ãã¿ã¹ã¯ãèªçºçã«CPUã®å¶åŸ¡ãä»ã®ã¿ã¹ã¯ã«è²ãã·ã¹ãã ã§ããããªãšã³ããã£ããã«ãã¿ã¹ã¯ïŒOSã§äœ¿çšãããOSããã€ã§ãã¿ã¹ã¯ãäžæã§ããïŒãšã¯ç°ãªããå調çãã«ãã¿ã¹ã¯ã¯ã¿ã¹ã¯èªèº«ããã€äžæåæ¢ããä»ã®ã¿ã¹ã¯ã«å®è¡ãèš±å¯ããããæ±ºå®ããããšã«äŸåããŸããJavaScriptãšReactã®æèã§ã¯ãããã¯æéã®ãããã¬ã³ããªã³ã°ã¿ã¹ã¯ãããå°ããªæçã«åå²ããäžã€ã®æçãå®äºããåŸãã€ãã³ãã«ãŒãã«å¶åŸ¡ããè²ãïŒyieldïŒãããšã§ãä»ã®ã¿ã¹ã¯ïŒãŠãŒã¶ãŒå ¥åãã¢ãã¡ãŒã·ã§ã³ãªã©ïŒãåŠçãããã®ãå¯èœã«ããããšãæå³ããŸããReactã¹ã±ãžã¥ãŒã©ã¯ããããéæããããã«æŽç·Žããã圢åŒã®å調çãã«ãã¿ã¹ã¯ãå®è£ ããŠããŸãã
Reactã¹ã±ãžã¥ãŒã©ã®å調çãã«ãã¿ã¹ã¯ãšã¹ã±ãžã¥ãŒã©ã®åœ¹å²
Reactã¹ã±ãžã¥ãŒã©ã¯ãã¿ã¹ã¯ã®åªå é äœä»ããšèª¿æŽãæ åœããReactã®å éšã©ã€ãã©ãªã§ããããã¯React 18ã®äžŠè¡æ©èœã®èåŸã«ãããšã³ãžã³ã§ãããã®äž»ãªç®æšã¯ãã¬ã³ããªã³ã°äœæ¥ãã€ã³ããªãžã§ã³ãã«ã¹ã±ãžã¥ãŒãªã³ã°ããããšã§ãUIã®å¿çæ§ãç¶æããããšã§ãããããéæããããã«ã以äžã®ããšãè¡ããŸãïŒ
- åªå é äœä»ãïŒ ã¹ã±ãžã¥ãŒã©ã¯ç°ãªãã¿ã¹ã¯ã«åªå é äœãå²ãåœãŠãŸããäŸãã°ã峿ã®ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒå ¥åãã£ãŒã«ããžã®ã¿ã€ãã³ã°ãªã©ïŒã¯ãããã¯ã°ã©ãŠã³ãã®ããŒã¿ãã§ãããããé«ãåªå 床ãæã¡ãŸãã
- äœæ¥åå²ïŒ 倧ããªã¬ã³ããªã³ã°ã¿ã¹ã¯ãäžåºŠã«å®è¡ãã代ããã«ãã¹ã±ãžã¥ãŒã©ã¯ãããããå°ããç¬ç«ããäœæ¥åäœã«åå²ããŸãã
- äžæãšåéïŒ ããåªå 床ã®é«ãã¿ã¹ã¯ãçºçããå Žåãã¹ã±ãžã¥ãŒã©ã¯ã¬ã³ããªã³ã°ã¿ã¹ã¯ãäžæããåŸã§äžæãããã¿ã¹ã¯ãåéã§ããŸãã
- ã¿ã¹ã¯è²æž¡ïŒ ãããå調çãã«ãã¿ã¹ã¯ãå¯èœã«ããäžå¿çãªã¡ã«ããºã ã§ããå°ããªäœæ¥åäœãå®äºããåŸãã¿ã¹ã¯ã¯ã¹ã±ãžã¥ãŒã©ã«å¶åŸ¡ãè²ãããšãã§ããã¹ã±ãžã¥ãŒã©ã¯æ¬¡ã«äœãããããæ±ºå®ããŸãã
ã€ãã³ãã«ãŒããšã¹ã±ãžã¥ãŒã©ã®çžäºäœçš
ã¹ã±ãžã¥ãŒã©ãã©ã®ããã«åäœããããçè§£ããããã«ã¯ãJavaScriptã®ã€ãã³ãã«ãŒããçè§£ããããšãäžå¯æ¬ ã§ããã€ãã³ãã«ãŒãã¯ã¡ãã»ãŒãžãã¥ãŒãç¶ç¶çã«ãã§ãã¯ããŸããã¡ãã»ãŒãžïŒã€ãã³ããã¿ã¹ã¯ã衚ãïŒãèŠã€ãããšããããåŠçãããŸããã¿ã¹ã¯ïŒäŸïŒReactã®ã¬ã³ããªã³ã°ïŒã®åŠçãé·åŒããšãã€ãã³ãã«ãŒãããããã¯ãããä»ã®ã¡ãã»ãŒãžã®åŠçã劚ããããŸããReactã¹ã±ãžã¥ãŒã©ã¯ã€ãã³ãã«ãŒããšé£æºããŠåäœããŸããã¬ã³ããªã³ã°ã¿ã¹ã¯ãåå²ããããšãåãµãã¿ã¹ã¯ãåŠçãããŸãããµãã¿ã¹ã¯ãå®äºãããšãã¹ã±ãžã¥ãŒã©ã¯ãã©ãŠã¶ã«å¯ŸããŠã次ã®ãµãã¿ã¹ã¯ãé©åãªã¿ã€ãã³ã°ã§å®è¡ããããã«ã¹ã±ãžã¥ãŒã«ãäŸé Œã§ããŸããããã¯å€ãã®å ŽåãçŸåšã®ã€ãã³ãã«ãŒãã®ãã£ãã¯ãçµäºããåŸããã€ãã©ãŠã¶ãç»é¢ãæç»ããå¿ èŠãããåã«è¡ãããŸããããã«ããããã®éã«ãã¥ãŒå ã®ä»ã®ã€ãã³ããåŠçããããšãå¯èœã«ãªããŸãã
䞊è¡ã¬ã³ããªã³ã°ã®è§£èª¬
䞊è¡ã¬ã³ããªã³ã°ãšã¯ãReactãè€æ°ã®ã³ã³ããŒãã³ãã䞊è¡ããŠã¬ã³ããªã³ã°ããããã¬ã³ããªã³ã°ãäžæãããããèœåã®ããšã§ããããã¯è€æ°ã®ã¹ã¬ãããå®è¡ããããšã§ã¯ãªããåäžã®ã¹ã¬ããããã广çã«ç®¡çããããšã§ãã䞊è¡ã¬ã³ããªã³ã°ã§ã¯ã以äžã®ããšãå¯èœã«ãªããŸãïŒ
- Reactã¯ã³ã³ããŒãã³ãããªãŒã®ã¬ã³ããªã³ã°ãéå§ã§ããŸãã
- ããåªå 床ã®é«ãæŽæ°ïŒäŸïŒãŠãŒã¶ãŒãå¥ã®ãã¿ã³ãã¯ãªãã¯ïŒãçºçããå ŽåãReactã¯çŸåšã®ã¬ã³ããªã³ã°ãäžæåæ¢ããæ°ããæŽæ°ãåŠçããŠããã以åã®ã¬ã³ããªã³ã°ãåéã§ããŸãã
- ããã«ããUIã®ããªãŒãºãé²ããããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãåžžã«è¿ éã«åŠçãããããšãä¿èšŒãããŸãã
ã¹ã±ãžã¥ãŒã©ã¯ããã®äžŠè¡æ§ã®ãªãŒã±ã¹ãã¬ãŒã¿ãŒã§ããåªå é äœãšå©çšå¯èœãªã¿ã€ã ãã¹ã©ã€ã¹ãã«åºã¥ããŠããã€ã¬ã³ããªã³ã°ãããã€äžæåæ¢ãããã€åéããããæ±ºå®ããŸãã
ã¿ã¹ã¯è²æž¡æŠç¥ïŒå調çãã«ãã¿ã¹ã¯ã®æ žå¿
ã¿ã¹ã¯è²æž¡æŠç¥ã¯ãJavaScriptã®ã¿ã¹ã¯ãç¹ã«Reactã¹ã±ãžã¥ãŒã©ã«ãã£ãŠç®¡çãããã¬ã³ããªã³ã°ã¿ã¹ã¯ããèªçºçã«å¶åŸ¡ãæŸæ£ããã¡ã«ããºã ã§ããããã¯ããã®æèã«ãããå調çãã«ãã¿ã¹ã¯ã®ç€ã§ããReactãæéã®ãããå¯èœæ§ã®ããã¬ã³ããªã³ã°æäœãå®è¡ããéããããäžã€ã®ã¢ããªã·ãã¯ãªãããã¯ã§è¡ãããã§ã¯ãããŸããã代ããã«ãäœæ¥ãããå°ããªåäœã«åå²ããŸããååäœãå®äºããåŸããæéããæ®ã£ãŠãããããããã¯äžæåæ¢ããŠä»ã®ã¿ã¹ã¯ãå®è¡ãããã¹ããã確èªããŸãããã®ç¢ºèªããããè²æž¡ïŒyieldingïŒãè¡ãããå Žé¢ã§ãã
è²æž¡ã®å éšçãªä»çµã¿
倧ãŸãã«èšããšãReactã¹ã±ãžã¥ãŒã©ãã¬ã³ããªã³ã°ãåŠçããŠãããšããããäœæ¥åäœãå®è¡ãããã®åŸã§æ¡ä»¶ã確èªããŸãããã®æ¡ä»¶ã«ã¯ãå€ãã®å ŽåãæåŸã®ãã¬ãŒã ãã¬ã³ããªã³ã°ãããŠããã©ããããã®æéãçµéãããããããã¯ç·æ¥ã®æŽæ°ãçºçãããã©ããããã©ãŠã¶ã«åãåãããããšãå«ãŸããŸããçŸåšã®ã¿ã¹ã¯ã«å²ãåœãŠãããã¿ã€ã ã¹ã©ã€ã¹ãè¶ éããå ŽåããŸãã¯ããåªå 床ã®é«ãã¿ã¹ã¯ãåŸ æ©ããŠããå Žåãã¹ã±ãžã¥ãŒã©ã¯è²æž¡ïŒyieldïŒããŸãã
å€ãJavaScriptç°å¢ã§ã¯ãããã«ã¯ `setTimeout(..., 0)` ã `requestIdleCallback` ã®äœ¿çšãå«ãŸããŠãããããããŸãããReactã¹ã±ãžã¥ãŒã©ã¯ã`requestAnimationFrame` ãæ³šææ·±ãã¿ã€ãã³ã°èª¿æŽãå«ããããæŽç·Žãããã¡ã«ããºã ãæŽ»çšããŠãå¿ ããããã©ãŠã¶ã®ã¡ã€ã³ã€ãã³ãã«ãŒãã«å®å šã«æ»ã£ãŠé²è¡ã忢ãããããšãªããå¹ççã«äœæ¥ãè²æž¡ãåéããŸããæ¬¡ã®äœæ¥ãã£ã³ã¯ããæ¬¡ã«å©çšå¯èœãªã¢ãã¡ãŒã·ã§ã³ãã¬ãŒã å ããŸãã¯ã¢ã€ãã«æã«å®è¡ããããã«ã¹ã±ãžã¥ãŒã«ã§ããŸãã
`shouldYield`颿°ïŒæŠå¿µçãªãã®ïŒ
éçºè ãã¢ããªã±ãŒã·ã§ã³ã³ãŒãå ã§ `shouldYield()` 颿°ãçŽæ¥åŒã³åºãããšã¯ãããŸããããããã¯ã¹ã±ãžã¥ãŒã©å éšã®æææ±ºå®ããã»ã¹ãæŠå¿µçã«è¡šãããã®ã§ããäœæ¥åäœïŒäŸïŒã³ã³ããŒãã³ãããªãŒã®å°ããªéšåã®ã¬ã³ããªã³ã°ïŒãå®è¡ããåŸãã¹ã±ãžã¥ãŒã©ã¯å éšçã«ãä»ãè²æž¡ãã¹ããïŒããšåããããŸãããã®æ±ºå®ã¯ä»¥äžã«åºã¥ããŠããŸãïŒ
- ã¿ã€ã ã¹ã©ã€ã¹ïŒ çŸåšã®ã¿ã¹ã¯ããã®ãã¬ãŒã ã«å²ãåœãŠãããæéäºç®ãè¶ éããŠããªããïŒ
- ã¿ã¹ã¯ã®åªå åºŠïŒ å³æã®å¯Ÿå¿ãå¿ èŠãªãããåªå 床ã®é«ãåŸ æ©äžã®ã¿ã¹ã¯ã¯ãããïŒ
- ãã©ãŠã¶ã®ç¶æ ïŒ ãã©ãŠã¶ã¯æç»ã®ãããªä»ã®éèŠãªæäœã§å¿ãããªããïŒ
ãããã®ãããããžã®çãããã¯ããã®å Žåãã¹ã±ãžã¥ãŒã©ã¯è²æž¡ããŸããããã¯ãçŸåšã®ã¬ã³ããªã³ã°äœæ¥ãäžæåæ¢ããä»ã®ã¿ã¹ã¯ïŒUIæŽæ°ããŠãŒã¶ãŒã€ãã³ãã®åŠçãå«ãïŒã®å®è¡ãèš±å¯ãããã®åŸãé©åãªã¿ã€ãã³ã°ã§äžæãããã¬ã³ããªã³ã°äœæ¥ãäžæãããšããããåéããããšãæå³ããŸãã
å©ç¹ïŒãã³ããããã³ã°ãªUIæŽæ°
ã¿ã¹ã¯è²æž¡æŠç¥ã®äž»ãªå©ç¹ã¯ãã¡ã€ã³ã¹ã¬ããããããã¯ããããšãªãUIã®æŽæ°ãå®è¡ã§ããããšã§ããããã«ããã以äžã®ããšãå®çŸããŸãïŒ
- å¿çæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ïŒ è€éãªã¬ã³ããªã³ã°æäœäžã§ãUIã¯ã€ã³ã¿ã©ã¯ãã£ããªãŸãŸã§ãããŠãŒã¶ãŒã¯é å»¶ãçµéšããããšãªãããã¿ã³ã®ã¯ãªãã¯ãã¹ã¯ããŒã«ãã¿ã€ãã³ã°ãã§ããŸãã
- ã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ïŒ ã¡ã€ã³ã¹ã¬ãããäžè²«ããŠãããã¯ãããªããããã¢ãã¡ãŒã·ã§ã³ãã«ã¯ã€ãããããã¬ãŒã èœã¡ãããããå¯èœæ§ãäœããªããŸãã
- äœæããã©ãŒãã³ã¹ã®åäžïŒ æäœã«ãããåèšæéãåãã§ãã£ãŠãããããåå²ããŠè²æž¡ããããšã§ãã¢ããªã±ãŒã·ã§ã³ã¯ããéããããå¿çæ§ãé«ããš*æã*ãããŸãã
å®è·µçãªæå³åããšã¿ã¹ã¯è²æž¡ã®æŽ»ç𿹿³
Reactéçºè ãšããŠãéåžžã¯æç€ºç㪠`yield` ã¹ããŒãã¡ã³ããèšè¿°ããããšã¯ãããŸãããReact 18以éã䜿çšãããã®äžŠè¡æ©èœãæå¹ã«ãªã£ãŠããå ŽåãReactã¹ã±ãžã¥ãŒã©ããããèªåçã«åŠçããŸãããããããã®æŠå¿µãçè§£ããããšã§ããã®ã¢ãã«å ã§ããè¯ãåäœããã³ãŒããæžãããšãã§ããŸãã
䞊è¡ã¢ãŒãã«ããèªåçãªè²æž¡
䞊è¡ã¬ã³ããªã³ã°ãéžæãããšïŒReact 18以éã䜿çšãã `ReactDOM` ãé©åã«èšå®ããããšã§ïŒãReactã¹ã±ãžã¥ãŒã©ãåŠçãåŒãç¶ããŸããã¬ã³ããªã³ã°äœæ¥ãèªåçã«åå²ããå¿ èŠã«å¿ããŠè²æž¡ããŸããããã¯ãå調çãã«ãã¿ã¹ã¯ã«ããããã©ãŒãã³ã¹åäžã®å€ãããããã«å©çšã§ããããšãæå³ããŸãã
æéã®ãããã¬ã³ããªã³ã°ã¿ã¹ã¯ã®ç¹å®
èªåçãªè²æž¡ã¯åŒ·åã§ãããäœãæéã®ãããã¿ã¹ã¯ãåŒãèµ·ãã*å¯èœæ§*ãããããèªèããŠããããšã¯äŸç¶ãšããŠæçã§ãããããã«ã¯ããã°ãã°ä»¥äžãå«ãŸããŸãïŒ
- 倧ããªãªã¹ãã®ã¬ã³ããªã³ã°ïŒ äœåãã®ã¢ã€ãã ãã¬ã³ããªã³ã°ããã«ã¯æéããããããšããããŸãã
- è€éãªæ¡ä»¶ä»ãã¬ã³ããªã³ã°ïŒ 倿°ã®DOMããŒããäœæãŸãã¯ç Žæ£ãããçµæãšãªããæ·±ããã¹ããããæ¡ä»¶ããžãã¯ã
- ã¬ã³ããŒé¢æ°å ã§ã®éãèšç®ïŒ ã³ã³ããŒãã³ãã®ã¬ã³ããŒã¡ãœããå ã§çŽæ¥ãé«ã³ã¹ããªèšç®ãå®è¡ããããšã
- é »ç¹ã§å€§èŠæš¡ãªstateæŽæ°ïŒ åºç¯å²ã®åã¬ã³ããªã³ã°ãåŒãèµ·ããã倧éã®ããŒã¿ã®æ¥éãªå€æŽã
è²æž¡ãèæ ®ããæé©åæŠç¥
Reactãè²æž¡ãåŠçããŸããããããæå€§éã«æŽ»çšããæ¹æ³ã§ã³ã³ããŒãã³ããèšè¿°ããããšãã§ããŸãïŒ
- 倧ããªãªã¹ãã®ããã®ä»®æ³åïŒ éåžžã«é·ããªã¹ãã«ã¯ã`react-window`ã`react-virtualized`ã®ãããªã©ã€ãã©ãªã䜿çšããŸãããããã®ã©ã€ãã©ãªã¯ãçŸåšãã¥ãŒããŒãã«è¡šç€ºãããŠããã¢ã€ãã ã®ã¿ãã¬ã³ããªã³ã°ãããããReactãç¹å®ã®æç¹ã§è¡ãå¿ èŠã®ããäœæ¥éãå€§å¹ ã«åæžããŸããããã«ãããèªç¶ãšããé »ç¹ãªè²æž¡ã®æ©äŒãçãŸããŸãã
- ã¡ã¢åïŒ`React.memo`, `useMemo`, `useCallback`ïŒïŒ ã³ã³ããŒãã³ããšå€ãå¿ èŠãªãšãã«ã®ã¿åèšç®ãããããã«ããŸãã`React.memo`ã¯é¢æ°ã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸãã`useMemo`ã¯é«ã³ã¹ããªèšç®ããã£ãã·ã¥ãã`useCallback`ã¯é¢æ°å®çŸ©ããã£ãã·ã¥ããŸããããã«ãããReactãè¡ãå¿ èŠã®ããäœæ¥éãæžããè²æž¡ããã广çã«ãªããŸãã
- ã³ãŒãåå²ïŒ`React.lazy` ãš `Suspense`ïŒïŒ ã¢ããªã±ãŒã·ã§ã³ãããªã³ããã³ãã§ããŒããããããå°ããªãã£ã³ã¯ã«åå²ããŸããããã«ãããåæã¬ã³ããªã³ã°ã®ãã€ããŒããæžããReactã¯çŸåšå¿ èŠãªUIã®éšåã®ã¬ã³ããªã³ã°ã«éäžã§ããŸãã
- ãŠãŒã¶ãŒå ¥åã®ãããŠã³ã¹ãšã¹ããããªã³ã°ïŒ é«ã³ã¹ããªæäœïŒäŸïŒæ€çŽ¢åè£ã®è¡šç€ºïŒãããªã¬ãŒããå ¥åãã£ãŒã«ãã«ã¯ããããŠã³ã¹ãã¹ããããªã³ã°ã䜿çšããŠæäœã®å®è¡é »åºŠãå¶éããŸããããã«ãããã¹ã±ãžã¥ãŒã©ãå§åããå¯èœæ§ã®ããæŽæ°ã®æ®ºå°ãé²ããŸãã
- é«ã³ã¹ããªèšç®ãã¬ã³ããŒããç§»åãããïŒ èšç®éã®å€ãã¿ã¹ã¯ãããå Žåã¯ãããããã€ãã³ããã³ãã©ã`useEffect`ããã¯ããããã¯Web Workerã«ç§»åããããšãæ€èšããŸããããã«ãããã¬ã³ããªã³ã°ããã»ã¹èªäœãå¯èœãªéãã¹ãªã ã«ä¿ã¡ãããé »ç¹ãªè²æž¡ãå¯èœã«ããŸãã
- æŽæ°ã®ãããåŠçïŒèªåããã³æåïŒïŒ React 18ã¯ãã€ãã³ããã³ãã©ãPromiseå ã§çºçããstateã®æŽæ°ãèªåçã«ãããåŠçããŸãããããã®ã³ã³ããã¹ãå€ã§æåã§æŽæ°ããããåŠçããå¿ èŠãããå Žåã¯ã峿ãã€åæçãªæŽæ°ãäžå¯æ¬ ãªç¹å®ã®ã·ããªãªã§`ReactDOM.flushSync()`ã䜿çšã§ããŸãããããã¯ã¹ã±ãžã¥ãŒã©ã®è²æž¡åäœããã€ãã¹ãããããæ§ããã«äœ¿çšããŠãã ããã
äŸïŒå€§èŠæš¡ãªããŒã¿ããŒãã«ã®æé©å
åœéçãªæ ªäŸ¡ããŒã¿ã®å€§èŠæš¡ãªããŒãã«ã衚瀺ããã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸããããäžŠè¡æ§ãšè²æž¡ããªããã°ã10,000è¡ãã¬ã³ããªã³ã°ãããšUIãæ°ç§éããªãŒãºããå¯èœæ§ããããŸãã
è²æž¡ãªãïŒæŠå¿µçïŒïŒ
åäžã®`renderTable`颿°ã10,000è¡ãã¹ãŠãå埩åŠçããããããã«å¯ŸããŠ`
è²æž¡ããïŒReact 18以éãšãã¹ããã©ã¯ãã£ã¹ã䜿çšïŒïŒ
- ä»®æ³åïŒ `react-window`ã®ãããªã©ã€ãã©ãªã䜿çšããŸããããŒãã«ã³ã³ããŒãã³ãã¯ããã¥ãŒããŒãã«è¡šç€ºãããŠãã20è¡çšåºŠã®ã¿ãã¬ã³ããªã³ã°ããŸãã
- ã¹ã±ãžã¥ãŒã©ã®åœ¹å²ïŒ ãŠãŒã¶ãŒãã¹ã¯ããŒã«ãããšãæ°ããè¡ã®ã»ããã衚瀺ãããŸããReactã¹ã±ãžã¥ãŒã©ã¯ããããã®æ°ããè¡ã®ã¬ã³ããªã³ã°ãããå°ããªãã£ã³ã¯ã«åå²ããŸãã
- ã¿ã¹ã¯è²æž¡ã®å®è·µïŒ è¡ã®åå°ããªãã£ã³ã¯ïŒäŸïŒäžåºŠã«2ã5è¡ïŒãã¬ã³ããªã³ã°ããããšãã¹ã±ãžã¥ãŒã©ã¯è²æž¡ãã¹ããã©ããããã§ãã¯ããŸãããŠãŒã¶ãŒãçŽ æ©ãã¹ã¯ããŒã«ããå ŽåãReactã¯æ°è¡ãã¬ã³ããªã³ã°ããåŸã«è²æž¡ããã¹ã¯ããŒã«ã€ãã³ãã®åŠçãèš±å¯ããæ¬¡ã®è¡ã»ããã®ã¬ã³ããªã³ã°ãã¹ã±ãžã¥ãŒã«ããŸããããã«ãããããŒãã«å šäœãäžåºŠã«ã¬ã³ããªã³ã°ãããªããŠããã¹ã¯ããŒã«ãã¹ã ãŒãºã§å¿çæ§ãé«ããšæããããŸãã
- ã¡ã¢åïŒ åã ã®è¡ã³ã³ããŒãã³ããã¡ã¢åïŒ`React.memo`ïŒããããšã§ã1è¡ã ãã®æŽæ°ãå¿ èŠãªå Žåã«ãä»ã®è¡ãäžå¿ èŠã«åã¬ã³ããªã³ã°ãããã®ãé²ããŸãã
ãã®çµæãã¹ã ãŒãºãªã¹ã¯ããŒã«äœéšãšã€ã³ã¿ã©ã¯ãã£ããªUIãå®çŸãããå調çãã«ãã¿ã¹ã¯ãšã¿ã¹ã¯è²æž¡ã®åã瀺ãããŸãã
ã°ããŒãã«ãªèæ ®äºé ãšå°æ¥ã®æ¹åæ§
å調çãã«ãã¿ã¹ã¯ãšã¿ã¹ã¯è²æž¡ã®ååã¯ããŠãŒã¶ãŒã®å Žæãããã€ã¹ã®èœåã«é¢ä¿ãªããæ®éçã«é©çšå¯èœã§ããããããããã€ãã®ã°ããŒãã«ãªèæ ®äºé ããããŸãïŒ
- 倿§ãªããã€ã¹æ§èœïŒ äžçäžã®ãŠãŒã¶ãŒã¯ã髿§èœãªãã¹ã¯ãããããäœæ¶è²»é»åã®æºåž¯é»è©±ãŸã§ãå¹ åºãããã€ã¹ã§Webã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ããŸããå調çãã«ãã¿ã¹ã¯ã¯ãäœæ¥ãããå¹ççã«åå²ã»å ±æããããããæ§èœã®äœãããã€ã¹ã§ãã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãç¶æã§ããããã«ããŸãã
- ãããã¯ãŒã¯é å»¶ïŒ ã¿ã¹ã¯è²æž¡ã¯äž»ã«CPUã«è² è·ã®ãããã¬ã³ããªã³ã°ã¿ã¹ã¯ã«å¯Ÿå¿ããŸãããUIã®ãããã¯ãè§£é€ãããã®èœåã¯ãå°ççã«åæ£ãããµãŒããŒããé »ç¹ã«ããŒã¿ãååŸããã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠãéèŠã§ããå¿çæ§ã®é«ãUIã¯ãããªãŒãºããŠããããã«èŠããã®ã§ã¯ãªãããããã¯ãŒã¯ãªã¯ãšã¹ããé²è¡äžã«ãã£ãŒãããã¯ïŒããŒãã£ã³ã°ã¹ãããŒãªã©ïŒãæäŸã§ããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ å¿çæ§ã®é«ãUIã¯ãæ¬è³ªçã«ããã¢ã¯ã»ã·ãã«ã§ããéåæ©èœã«é害ããããã€ã³ã¿ã©ã¯ã·ã§ã³ã®ã¿ã€ãã³ã°ãäžæ£ç¢ºã«ãªããã¡ãªãŠãŒã¶ãŒã¯ãããªãŒãºããŠå ¥åãç¡èŠããªãã¢ããªã±ãŒã·ã§ã³ããæ©æµãåããã§ãããã
Reactã¹ã±ãžã¥ãŒã©ã®é²å
Reactã®ã¹ã±ãžã¥ãŒã©ã¯ãçµ¶ããé²åããŠãããã¯ãããžãŒã§ããåªå é äœä»ããæå¹æéãè²æž¡ãšãã£ãæŠå¿µã¯æŽç·ŽãããŠãããå€ãã®ã€ãã¬ãŒã·ã§ã³ãçµãŠæ¹è¯ãããŠããŸãããReactã®å°æ¥ã®éçºã§ã¯ãã¹ã±ãžã¥ãŒãªã³ã°æ©èœãããã«åŒ·åããããã©ãŠã¶APIãæŽ»çšããããäœæ¥ã®åé ãæé©åãããããæ°ããæ¹æ³ã暡玢ãããå¯èœæ§ããããŸããäžŠè¡æ©èœãžã®ç§»è¡ã¯ãã°ããŒãã«ãªWebã¢ããªã±ãŒã·ã§ã³ã®ããã®è€éãªããã©ãŒãã³ã¹èª²é¡ã解決ãããšããReactã®ã³ãããã¡ã³ãã®èšŒã§ãã
çµè«
Reactã¹ã±ãžã¥ãŒã©ã®å調çãã«ãã¿ã¹ã¯ã¯ããã®ã¿ã¹ã¯è²æž¡æŠç¥ã«ãã£ãŠæ¯ããããŠãããããã©ãŒãã³ã¹ãé«ãå¿çæ§ã®è¯ãWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§ã®å€§ããªé²æ©ã衚ããŠããŸãã倧ããªã¬ã³ããªã³ã°ã¿ã¹ã¯ãåå²ããã³ã³ããŒãã³ããèªçºçã«å¶åŸ¡ãè²ãããšãèš±å¯ããããšã§ãReactã¯é«è² è·æã§ãUIãã€ã³ã¿ã©ã¯ãã£ãã§æµåçãªç¶æ ãä¿ã€ããšãä¿èšŒããŸãããã®æŠç¥ãçè§£ããããšã§ãéçºè ã¯ããå¹ççãªã³ãŒããæžããReactã®äžŠè¡æ©èœã广çã«æŽ»çšããäžçäžã®ãªãŒãã£ãšã³ã¹ã«åè¶ãããŠãŒã¶ãŒäœéšãæäŸããããšãã§ããŸãã
è²æž¡ãæåã§ç®¡çããå¿ èŠã¯ãããŸãããããã®ã¡ã«ããºã ãèªèããŠããããšã¯ãã³ã³ããŒãã³ããšã¢ãŒããã¯ãã£ãæé©åããäžã§åœ¹ç«ã¡ãŸããä»®æ³åãã¡ã¢åãã³ãŒãåå²ãšãã£ããã©ã¯ãã£ã¹ãåãå ¥ããããšã§ãReactã¹ã±ãžã¥ãŒã©ã®ããã³ã·ã£ã«ãæå€§éã«åŒãåºãããŠãŒã¶ãŒãã©ãã«ããŠããæ©èœçã§ããã ãã§ãªã䜿ãã®ã楜ããã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã
Reactéçºã®æªæ¥ã¯äžŠè¡åŠçã«ãããå調çãã«ãã¿ã¹ã¯ãšã¿ã¹ã¯è²æž¡ã®åºæ¬ååããã¹ã¿ãŒããããšããWebããã©ãŒãã³ã¹ã®æåç·ã«ç«ã¡ç¶ããããã®éµãšãªããŸãã